<template>
  <view class="my-content">
    <image class="bg" src="../../static/image/img-bg.png" mode="scaleToFill" />
    <scroll-view scroll-y>
      <view class="scroll">
        <view class="userDate">
          <image src="../../static/image/img-头像.png" mode="scaleToFill" />
          <h4>{{ name }}</h4>
          <p>司机编号：{{ number }}</p>
          <p>手机号：{{ phone }}</p>
        </view>
        <view class="task">
          <h5>本月任务</h5>
          <view class="task1">
            <view><text>zhanwei</text><text>任务总量</text></view>
            <view><text>zhanwei</text><text>完成任务量</text></view>
            <view><text>zhanwei</text><text>运输里程(km)</text></view>
          </view>
        </view>
        <view class="list">
          <uni-list>
            <uni-list-item title="车辆信息" :clickable="true" @click="toTruck" showArrow>
            </uni-list-item>
            <uni-list-item title="任务数据" showArrow></uni-list-item>
            <uni-list-item title="系统设置" showArrow></uni-list-item>
          </uni-list>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { getUserDateAPI, getTaskReportAPI,getTruckAPI } from "@/api/user";

export default {
  name: "UniAppIndex",

  data() {
    return {
      name: "",
      number: "",
      phone: "",
    };
  },

  computed: {
    ...mapState(["capButton"]),
  },

  async onShow() {
    this.getUserDate();
    this.getTaskReport();
    const res=await  getTruckAPI()
    console.log(res);
  },

  methods: {
    async getUserDate() {
      const { data } = await getUserDateAPI();
      console.log(data);
      const { name, number, phone } = data;
      this.name = name;
      this.number = number;
      this.phone = phone;
    },
    async getTaskReport() {
      const date = new Date();
      const month = "" + date.getMonth() + 1;
      const year = "" + date.getFullYear();
      //   const month = "07"
      // const year = '2022'
      const params = { month, year };
      // console.log(params.year);
      // console.log(params);
      const res = await getTaskReportAPI(params);
      console.log(res);
    },
    toTruck(){
      console.log(44454);
      uni.navigateTo({
        url:"/pages/my/truck"
      })
    }
  },
};
</script>

<style lang="scss">
.my-content {
  .scroll {
    display: flex;
    width: 100vw;
    // height: 60vh;
    flex-direction: column;
    align-items: center;
    margin-top: 10vh;

    .userDate {
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 67px;
        height: 67px;
      }
    }

    .task {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      border-radius: 8px;
      width: 90vw;
      height: 134px;
      margin: 30px 0 20px 0;

      h5 {
        margin: 10px 0;
      }

      .task1 {
        flex: 1;
        display: flex;
        width: 100%;
        justify-content: space-around;

        view {
          display: flex;
          width: 33%;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
        }
      }
    }

    .list {
      width: 90vw;
    }
  }
}
</style>
<style lang="scss" scoped>
.my-content {
  // display: flex;
  height: 98vh;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  // background-image: url('../../static/image/img-bg.png');
  .bg {
    position: absolute;
    top: -5px;
    width: 100vw;
    height: 375px;
  }
}
</style>
